<template>
    <el-drawer :visible.sync="drawer" direction="rtl" size="50%" :with-header="false" :width="700"
        :append-to-body="true">
        <div class="drawer_box">
            <div class="drawer_title">
                <div class="drawer_t">
                    <div class="drawer_t_l">
                        <img class="drawer_t_l_img" src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png"
                            alt="" />
                        添加权益
                    </div>
                    <img class="drawer_t_r" src="/static/skin/herodoo/main/platform/home/img/guanbi.png" alt=""
                        @click="drawer = false" />
                </div>
            </div>
            <div class="drawer_content">
                <div class="top_box">
                    <div class="search_box">
                        <img src="/static/skin/herodoo/main/platform/home/img/search.png" alt="">
                        <input v-model="searchValue" type="text" placeholder="请输入搜索内容"
                            @keydown.enter="searchEnterKeyPress" @blur="searchEnterKeyPress">
                    </div>
                </div>
                <div class="drawer_c">
                    <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange" :cell-class-name="tableRowStyle"
                        :reserve-selection="true" :row-key="getRowKeys">
                        <el-table-column type="selection" min-width="3%" :selectable="selectable">
                        </el-table-column>
                        <el-table-column label="权益名称" min-width="30%">
                            <template slot-scope="scope">
                                <div class="scope_name">
                                    <img class="table_img" :src="getUrl(scope.row.MainPicturePath)" alt="">
                                    {{ scope.row.Name }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="权益标签" min-width="20%">
                            <template slot-scope="scope">
                                <div class="scope_label">
                                    <span v-for="(item, index) in getTag(scope.row.EquityFlagListName)" :key="index">{{
                                        item }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="单价" min-width="15%">
                            <template slot-scope="scope">
                                <div class="scope_price">
                                    ￥{{ scope.row.CostPrice }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="库存" min-width="10%">
                            <template slot-scope="scope">
                                <div class="scope_price">
                                    {{ scope.row.InventoryQuantity }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="金额" min-width="15%">
                            <template slot-scope="scope">
                                <div class="scope_sum">
                                    ￥{{ scope.row.CostPrice }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="end" v-if="total > 0">
                    <el-pagination background layout="prev, pager, next" :total="total" :current-page="currentPage"
                        :page-size="pageSize" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>

            <div class="button_list">
                <button @click="save()">确认</button>
            </div>
        </div>
    </el-drawer>
</template>

<script>

export default {
    name: "cat_dialog",
    props: {
        // isEdit: {
        //   type: Boolean,
        //   default: true
        // }
    },
    data() {
        return {
            octopus: this.$parent.$parent.octopus,
            drawer: false,
            isEdit: true,
            type: 'CREATE',
            list: [],
            multipleSelection: [],
            searchValue:'',
            form: {
                sort: 1,//排序
            },
            rules: {
                // zn: { required: true, message: "主题类型中文简体名称" },
            },
            total: 0,
            currentPage: 1, //当前页
            pageSize: 5, // 每页显示条数
            selectId: '',//选中的ID
        };
    },
    created() {

    },
    watch: {

    },
    methods: {
        drawerOpen(editType = true, list = [], currentPage = 1) {
            this.drawer = true;
            this.currentPage = currentPage
            if (list.length > 0) {
                this.selectId = list[0].ID;
            }
            this.getList(this.currentPage);
        },

        // 获取自有权益
        getList(e = 1) {
            this.currentPage = e;
            this.octopus.request.api.post(
                "/Octopus/Engine/List",
                {
                    id: 1181,
                    cellData: [
                        { name: "CompanyID" },	// 权益所属公司
                        { name: "CostPrice", },	// 平台价格
                        { name: "CreateTime" },	// 权益创建时间
                        { name: "EffectiveTime" },	// 生效时间
                        { name: "EquityFlagList", },	// 权益标签
                        { name: "EquityFlagListName" ,},	// 权益标签中文
                        { name: "ExpireTime" },	// 过期时间
                        { name: "ID" },	// 权益ID
                        { name: "InventoryQuantity" },	// 库存数量
                        { name: "MainPicturePath" },	// 主图
                        { name: "Name", filterKey:'like',filterValue:this.searchValue},	// 权益名称
                        { name: "ProductFlagList" },	// 产品标签
                        { name: "ProductFlagListName", },	// 产品标签 中文
                        { name: "SalePrice" },	// 市场价格
                        { name: "SecondaryPicturePath" },	// 副图
                        { name: "SoldQuantity" },	// 已售数量
                        { name: "Status" },	// 权益状态
                        { name: "TransferRuleID", },	// 采购公司限制
                        { name: "TransferRuleIDName" },	// 采购公司限制中文
                        { name: "TypeID", },	// 权益类型
                        { name: "TypeIDName" },	// 权益类型 （中文）
                    ],
                    paramData: {
                        CompanyID: this.octopus.passport.authorization.company == 1 ? 'NULL' : this.octopus.passport.authorization.company,
                        IsInventory: false
                    },
                    pageData: {
                        rowSize: this.pageSize,
                        index: e
                    },
                },
                (data) => {
                    if (data.status.code == 200) {
                        this.multipleSelection = [];
                        this.list = data.content.queryData;
                        this.total = data.content.pageData.totalRows;

                        let find = this.list.findIndex(x => { return x.ID == this.selectId })

                        this.$nextTick(() => {
                            this.$refs.multipleTable && this.$refs.multipleTable.toggleRowSelection(this.list[find], true)
                        })


                    } else {
                        this.octopus.tips.error(data);
                    }
                });
        },
        save() {
            this.drawer = false;
            this.$emit('getList', this.multipleSelection, this.currentPage);
        },
        getUrl(url) {
            let str = JSON.parse(url);
            return str[0].url;
        },
        getTag(str) {
            let arr = str.split(',');
            return arr
        },
        handleSelectionChange(val) {
            if (val.length > 1) {
                this.multipleTable = val[val.length - 1];
                this.$refs.multipleTable.clearSelection(); //清空列表的选中
                this.$refs.multipleTable.toggleRowSelection(val[val.length - 1]); //只显示选中最后一个 这时val还是多选的列表(就是你选中的几个数据)
            } else {
                this.multipleSelection = val;
            }
        },
        handleCurrentChange(e) {
            this.getList(e);
        },
        searchEnterKeyPress(){
            this.getList(1)
        }
    },
};
</script>
<style scoped>
.drawer_box {
    padding: 3rem 0.8rem 3rem 0;
    height: calc(100% - 5rem);
    display: flex;
    flex-direction: column;
}

.drawer_title {
    box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
    padding-bottom: 1rem;
    font-size: 1.6rem;
}

.drawer_t {
    padding: 0 2.8rem;
    display: flex;
    justify-content: space-between;
}

.drawer_t_l {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
}

.drawer_t_l_img {
    width: 2.8rem;
    margin-right: 1rem;
}

.drawer_t_r {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
}

.button_box {
    margin-top: 1rem;
    padding: 0 3rem;
    display: flex;
}

.drawer_content {
    overflow-y: auto;
    margin-top: 1.5rem;
    height: calc(100vh - 11rem);
    padding: 0 3rem;
    width: 100%;
    padding-bottom: 1rem;
}

.drawer_content .title {
    font-size: 1.8rem;
    font-weight: bold;
}

.drawer_content .driver-title {
    margin-top: 1em;
}

.content-box {
    display: flex;
    align-items: center;
    margin: 2rem 0 2rem 2em;
}

.mt-10 {
    margin-top: 10rem;
}

.content-box .label {
    width: 25%;
    font-size: 1.6rem;
}

.content-box .label .label-bold {
    font-size: 1.8rem;
    font-weight: bold;
}

.content-box .desc {
    flex: 1;
    font-size: 1.6rem;
}

.list-box {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.list-box {
    line-height: 4rem;
    margin-top: 2rem;
}

.list-box .left {
    width: 20%;
    font-size: 1.5rem;
}

.list-box .right {
    width: 80%;
}

.button_list {
    margin-top: 1rem;
    display: flex;
    justify-content: end;
    position: absolute;
    background-color: #ffff;
    bottom: 1rem;
    width: calc(100% - 7rem);
}

.button_list button {
    border: none;
    height: 4rem;
    width: 12rem;
    border-radius: 1rem;
    margin-left: 1rem;
    color: #ffff;
    background-color: #F78C53;
    cursor: pointer;
}

.list-box .right .add_content {
    height: 4.5rem;
    line-height: 4.5rem;
    border: 1px dashed #F87338;
    display: inline-block;
    padding: 0 1.5rem;
    cursor: pointer;
    border-radius: .5rem;
}

.list-box .right .el-input {
    width: 100%;
    height: 4.5rem;
}

.list-box .right .add_content i {
    color: #F87338;
    font-weight: 700;
    margin-right: .5rem;
}

.drawer_c {
    height: 67vh;
    overflow: auto;
    margin-top: 3rem;
    /* padding: 0 3rem; */
    background-color: #FDFDFD;
}

>>>.el-table th>.cell {
    font-weight: bold;
}

>>>.el-table__row {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 设置阴影效果 */
}

>>>.el-table::before {
    display: none;
}

>>>.el-table .el-table__body {
    -webkit-border-vertical-spacing: .8rem;
}

>>>.el-table thead th {
    font-size: 1.6rem;
    color: #575757;
}

>>>.el-table thead th:nth-last-child(2) {
    border-radius: 0 .5rem .5rem 0;
    /* right: 1rem; */
}

>>>.el-table thead th,
>>>.el-table .el-table__row td {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    padding: 1.1rem 0;
}

>>>.el-table thead th:first-child,
>>>.el-table .el-table__row td:first-child {
    border-left: 1px solid #EFEFEF;
    border-radius: 5px 0 0 5px;
}

>>>.el-table .el-table__row>td {
    font-size: 1.4rem;
    color: #333333;
}

>>>.el-table .el-table__row>td:last-child {
    border-radius: 0 5px 5px 0;
    right: 1px;
}

>>>.el-table .el-table__body tr:hover>td.el-table__cell {
    background-color: rgba(0, 110, 255, 0.05);
}

>>>.el-table .el-table__fixed::before {
    display: none;
}

>>>.el-table thead {
    color: #1B1917 !important;
    font-size: 1.8rem;

}

>>>.has-gutter tr {
    background: linear-gradient(to right, #FEFEFE, #FBF9F7) !important;
    /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
}

>>>.el-table thead th {
    background-color: transparent;
}

>>>.el-table thead th {
    background-color: transparent;
}

>>>.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #F78C51;
    border-color: #F78C51;
}

>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #F78C51;
    border-color: #F78C51;
}

.scope_label {
    display: flex;
    flex-wrap: wrap;
}

.scope_name {
    font-size: 1.6rem;
    display: flex;
}

.scope_label span {
    color: #a1a1a1;
    border: 1px solid #d9d9d9;
    padding: 0px .5rem;
    font-size: 1.3rem;
    margin: .3rem;
    border-radius: .5rem
}

.table_img {
    width: 7rem;
    height: 7rem;
    border-radius: 1rem;
    margin-right: 1rem;
}

.scope_sum {
    font-size: 2rem;
    font-weight: bold;
    color: #F19065;
}

.scope_price {
    font-size: 2rem;
    font-weight: bold;
    color: #191916;
}

.top_box {
    width: 100%;
    height: 5.3rem;
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-bottom: 1.2rem;
    box-sizing: border-box;
}

.top_box .search_box {
    width: 32rem;
    height: 100%;
    border: 1px solid #F0F0F0;
    border-radius: 4rem;
    display: flex;
    justify-content: space-between;
    padding: 0 .8rem;
    box-sizing: border-box;
}

.top_box .search_box input {
    border: none;
    outline: none;
    width: 70%;
}

.top_box .search_box img {
    cursor: pointer;
}
</style>